<template>
    <div>
        <div class="menuDescriptionBox">
            <i class="fa fa-question-circle-o fa-lg"></i> <span class="menuDescTitle">基本信息说明：</span>
            <div class="menuDesc">该列表管理中，非自定义字段是无法进行删除的</div>
        </div>
        <div class="tableHeader">
        <div class="tableHeaderTitle">会员数据模型</div>
            <div class="tableHeaderMenu">
                <el-button-group>
                    <el-button icon="el-icon-refresh" @click="refreshData" size="mini"></el-button>
                </el-button-group>
            </div>
        </div>
        <el-table ref="multipleTable" :data="memberModelData" tooltip-effect="dark" style="width: 100%">
            <el-table-column label="序号" type="index" width="80"></el-table-column>
            <el-table-column prop="COLUMN_NAME" label="模型名称"></el-table-column>
            <el-table-column label="是否为自定义模型">
                <template slot-scope="scope">
                    <span v-if="$common.isCustomField(scope.row.COLUMN_NAME)" style="color:green">是</span>
                    <span v-if="!$common.isCustomField(scope.row.COLUMN_NAME)">否</span>
                </template>
            </el-table-column>
            <el-table-column prop="DATA_TYPE" label="模型类型"></el-table-column>
            <el-table-column prop="COLUMN_COMMENT" label="模型注解"></el-table-column>
            <el-table-column label="操作" fixed="right" width="260">
                <template slot-scope="scope">
                    <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)" v-if="$common.isCustomField(scope.row.COLUMN_NAME)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
    import { mapState,mapMutations } from 'vuex'
    export default {
        //数据源
        data(){
            return {

            }
        },
        //初始化函数
        mounted() {
            this.initData('init');
        },
        //计算属性
        computed: {
            ...mapState({
                memberModelData : state => state.MemberModelListModule.memberModelData
             })
        },
        //组件方法
        methods: {

            initData(type){

                var params = {
                    dbName    : 'easyd_cms',
                    tableName : 'easyd_cms_member'
                }
                
                if(type == 'init'){
                    this.$myLoading.startLoading()
                }
                
                this.$http.postHttp(
                    this.$API.dbGetTableDesc,
                    params,
                    rs => {
                        this.$store.commit('MemberModelListModule/updateMemberModelData',rs)

                        if(type == 'init'){
                            this.$myLoading.endLoading()
                        }
                        
                    }
                )
            },
            handleDelete(index,item){

                var params = {
                    tableName : 'easyd_cms_member',
                    fieldName : item.COLUMN_NAME
                }

                this.$myPop.confirmBox("确认操作","确定要删除该自定义模型吗？",()=>{

                    this.$myLoading.startLoading()
                    this.$http.postHttp(
                        this.$API.dbDeleteTableField,
                        params,
                        rs => {
                            this.$myLoading.endLoading()
                            this.initData('update');
                        }
                    )

                });

                

            },
            refreshData(){
                this.initData('init');
            }
        }
    }
</script>

<style lang="stylus" scoped>
@import '~PUBLIC_CSS';
</style>